<template>
  <div class="shop-list app-container">
    <!-- 搜索总条目数 -->
    <p class="tip">共找到{{totalCount}}条相关信息</p>
    <!-- 排序组件 -->
    <order-by :shop="true" @on-change="setShopSearchParams"></order-by>
    <!-- 搜索商品结果 -->
    <div class="list">
      <single-product v-for="(goods, index) in goodsList" :goods="goods" :key="index"></single-product>
    </div>
    <!-- 分页组件 -->
    <w-paging class="paging-style" v-show="params.totalPage > 1" :current="Number(params.currentPage)" :total="Number(params.totalPage)" @on-page="getNextGoodsList"></w-paging>
    <div class="clearfix"></div>
  </div>
</template>

<script>
  import SingleProduct from './components/singleProduct'
  import orderBy from '../search/components/OrderBy'
  import { apiStoreNavigationAll } from '../../common/api'
  import { parseQueryString, joinQueryParamsToUrl } from 'js/util'

  export default {
    data() {
      return {
        goodsList: [],
        totalCount: 0,
        params: {
          // 搜索类型
          searchType: (this.$route.query.type || 'floor'),
          // 如果是导航进来的，则此项有值
          navigationId: this.$route.query.navigationId,
          // 如果是楼层进来的，则此项有值
          floorId: this.$route.query.floorId,
          // 当前页
          currentPage: 1,
          // 每页展示的条目数
          showCount: 20,
          // 店铺id
          storeId: this.$route.params.id,
          // 商品最低价
          goodsCurrentPriceFloor: '',
          // 商品最高价
          goodsCurrentPriceCeiling: '',
          // 默认按照综合排序
          orderBy: '',
          // 降序排列
          orderType: 'desc'
        },
        code: {
          currentPage: 'page',
          goodsCurrentPriceFloor: 'pricedown',
          goodsCurrentPriceCeiling: 'priceup',
          orderBy: 'ob',
          orderType: 'ot'
        }
      }
    },
    created() {
      this.doSearchGoods()
    },
    methods: {
      /**
       * 设置店铺搜索参数
       *
       * @param { Object } shopSearchParams 搜索结果参数
       */
      setShopSearchParams(shopSearchParams) {
        // 将选中的参数和当前参数合并
        Object.assign(this.params, shopSearchParams)
        // 获取url中的参数
        let queryParams = parseQueryString(this.$route.fullPath)
        // 将选中的值塞到路由中
        for (let key in this.params) {
          queryParams[this.code[key]] = this.params[key]
        }
        this.$router.push(decodeURIComponent(encodeURIComponent(joinQueryParamsToUrl(this.$route.fullPath, queryParams))))
      },

      /**
       * 搜索操作
       */
      doSearchGoods() {
        // 从接口中获取数据
        apiStoreNavigationAll(this.params).then((data) => {
          // 商品列表
          this.goodsList = data.goodsList

          // 当前页
          this.params.currentPage = data.currentPage

          // 总页数
          this.params.totalPage = data.totalPageCount

          // 搜索到的总数量
          this.totalCount = data.totalCount
        })
      },

      /**
       * 查看下一页的商品列表
       *
       * @param { Number } page 当前页
       */
      getNextGoodsList(page) {
        // 设置查询的页码是当前页
        this.params.currentPage = page

        // 执行搜索方法
        this.doSearchGoods()
      }
    },
    components: {
      SingleProduct,
      orderBy
    },
    watch: {
      $route(to, from) {
        this.params = {
          // 搜索类型
          searchType: (to.query.type || 'floor'),
          // 如果是导航进来的，则此项有值
          navigationId: to.query.navigationId,
          // 如果是楼层进来的，则此项有值
          floorId: to.query.floorId,
          // 当前页
          currentPage: (to.query.page || 1),
          // 每页展示的条目数
          showCount: 20,
          // 店铺id
          storeId: to.params.id,
          // 商品最低价
          goodsCurrentPriceFloor: to.query.pricedown,
          // 商品最高价
          goodsCurrentPriceCeiling: to.query.priceup,
          // 默认按照综合排序
          orderBy: to.query.ob,
          // 降序排列
          orderType: to.query.ot
        }
        this.doSearchGoods()
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import '../../scss/_var.scss';
  #orderby {
    margin-bottom: 20px;
  }
  .tip {
    height: 52px;
    line-height: 52px;
    color: $color-gray;
  }
  .list {
    .single-item {
      display: inline-block;
      margin-right: 6px;
      margin-bottom: 6px;
      font-size: 0;
      &:nth-child(4n+4) {
        margin-right: 0;
      }
    }
  }
  .shop-list {
    .m-paging {
      float: left;
      width: 100%;
      text-align: center;
    }
  }
</style>